<template>
  <!-- 筛选区 -->
  <div class="sub-filter" v-if='conditions.length && brands.length && !loading'>
    <!-- 品牌条件 -->
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a @click='sortParams=item.id' :class='{active: sortParams===item.id}' href="javascript:;" v-for='item in brands' :key='item.id'>{{item.name}}</a>
      </div>
    </div>
    <!-- 规格条件 -->
    <div class="item" v-for="item in conditions" :key="item.id">
      <div class="head">{{item.name}}：</div>
      <div class="body">
        <a @click='item.selectedProp=tag.id' :class='{active: item.selectedProp===tag.id}' href="javascript:;" v-for="tag in item.properties" :key="tag.id">{{tag.name}}</a>
      </div>
    </div>
  </div>
  <div v-else class="sub-filter">
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
  </div>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category.js'
import { useRoute } from 'vue-router'
import { watch, ref } from 'vue'

export default {
  name: 'SubFilter',
  setup (props, { emit }) {
    const route = useRoute()
    const conditions = ref([])
    const brands = ref([])
    const loading = ref(false)
    const sortParams = ref(null)
    // 动态路由组件默认是缓存的
    watch(() => route.params.id, (newVal) => {
      // 仅仅监听二级分类的id
      if (route.fullPath !== `/category/sub/${route.params.id}`) return
      // 接口正在调用，此时应该显示骨架屏
      loading.value = true
      findSubCategoryFilter(newVal).then(ret => {
        // 给每一种规格的左侧添加【全部】
        ret.result.saleProperties.forEach(item => {
          // 记录每一种规格选中的值
          item.selectedProp = null
          item.properties.unshift({
            id: null,
            name: '全部'
          })
        })
        conditions.value = ret.result.saleProperties
        // 记录品牌的选中状态
        ret.result.brands.selectedBrand = null
        // 给品牌的左侧添加【全部】
        ret.result.brands.unshift({
          id: null,
          name: '全部'
        })
        brands.value = ret.result.brands
        // 接口调用成功后，隐藏骨架屏
        loading.value = false
      })
    }, {
      immediate: true
    })
    watch([sortParams, conditions], () => {
      // 获取规格参数
      const attrs = []
      conditions.value.forEach((item) => {
        const tagInfo = item.properties.find(tag => tag.id === item.selectedProp)
        attrs.push({
          groupName: item.name,
          propertyName: tagInfo.name
        })
        console.log(attrs)
        emit('shaixuan', {
          brandId: sortParams.value,
          attrs: attrs
        })
      })
    }, {
      deep: true
    })
    return { conditions, brands, loading, sortParams }
  }
}
</script>
<style scoped lang='less'>
.xtx-skeleton {
    padding: 10px 0;
}
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
</style>
